.biz-udpgothic-regular {
  font-family: "BIZ UDPGothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* body設定 */
body{
	background-image:url("../pic2025/n25_dot.png"); /* 背景画像の指定 */
}

main{
	font-family:"BIZ UDGothic", sans-serif;
}

.subtitle{
	word-break: keep-all;
}

.test-img {
    width: min(100%, 350px);
    margin-inline: auto;
    overflow: hidden;
    cursor:url('../pic2025/n25_cursor/n25_マイク(interview).png'),pointer;/*カーソル*/
    position: relative;
	z-index: 50;
}

.test-img img {
    transition: transform .5s ease;
    position: relative;
	z-index: 50;
}

.test-img:hover img {
    transform: scale(1.1);
}

.interview{
display:flex;
justify-content:center;
position: relative;
	z-index: 50;
}

.interview dd{
margin-left: 0;
margin:auto;
}

.interview dl{
margin:0 auto 0 auto;
}

.icon_pc{
max-height: 400px;
border-radius:25px;
display: block;
position: relative;
z-index: 98;
}

.icon_mobile{
display: none;
position: relative;
z-index: 50;
}

/*img{
margin: 10px;
width:250px;
}*/

section{
margin-top:40px;
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
position: relative;
z-index: 50;
}




.profile img{
width: 200px;
border-radius:20px;
position: relative;
z-index: 50;
}

.profile{
display: flex;
justify-content: center;
margin-top:80px;
position: relative;
z-index: 50;
}

.joho{
margin:65px 0 auto 20px;
color:#223a70;
position: relative;
z-index: 50;
}

.joho p{
font-size: 18px;
margin:12px 0 12px 0;
}

.joho b{
font-size: 30px;
margin:15px 0 10px 0;
}


.schedule{
	display:block;
	margin:auto;
	box-shadow:0 0 10px 0 #ccc;
	width:95%;
	border-radius:20px;
	background-color:#ffffff;
	color:#223a70;
	position: relative;
	z-index: 50;
	}


table{
	width:80%;
	margin: auto;
	border-collapse: collapse;
	position: relative;
	z-index: 50;
}

tr{
gap: 20px;

}

.line{
border-bottom: 1px solid #ccc;
}


th{
padding:50px 50px 50px 60px;
text-align:center;
font-size:30px;
width:30%;
}

td{
padding:20px 20px 20px 40px;
text-align:left;
font-size:20px;
}


/*.cp_hr01 {
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: #43a047;
}*/

.careerstep{
display:flex;
gap:1%;
color:#223a70;
position: relative;
z-index: 50;
}

#career1{
	box-shadow:0 0 10px 0 #ccc;
	width:98%;
	height:325px;
	border-radius:10px;
	background-color:#ffffff;
	z-index: 50;
}

#career2{
	box-shadow:0 0 10px 0 #ccc;
	width:98%;
	height:325px;
	border-radius:10px;
	background-color:#ffffff;
	z-index: 50;
}

#career3{
	box-shadow:0 0 10px 0 #ccc;
	width:98%;
	height:325px;
	border-radius:10px;
	background-color:#ffffff;
	z-index: 50;
}


.careerstep dt{
	padding:25px 20px 20px 20px;
	font-size:23px;
	text-align:center;
	}

.careerstep dd{
	margin-left:0;
	padding:10px 25px 20px 30px;
	font-size:18px;
	text-align:left;
	line-height:1.5;
	}
	

.step{
    margin-bottom: 0.2rem;
    background-image: linear-gradient(135deg, #83A6CD 10%, #F697A4 100%);
    background-repeat: no-repeat;
    background-size: 100% 50px;
    background-position: bottom;
}

.careerstep dl{
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 1s ease-out, transform 1s ease-out;
  transition-delay: calc(var(--delay) * 0.3s);
  width: 200px;
  height: 200px;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.careerstep dl.visible {
  opacity: 1;
  transform: translateY(0);
}


.Q{
text-align:center;
margin: 5px;
color:#223a70;
padding:5%;
position: relative;
z-index: 50;
}

.q {
	font-size:20px;
	word-break: keep-all;
  /* マーカーを引く 
  rgba(255, 153, 0,0.5) の部分はマーカーの色を指定しています。
　実装される際は、お好きな色、透明度をお入れ下さい。 *//* マーカーを引く */
  background: linear-gradient(135deg, #83A6CD 10%, #F697A4 100%);
  
  /* インライン属性を指定する */
  display: inline;                                                        
  /* 背景の繰り返しを停止 */
  background-repeat: no-repeat;

  /* マーカーの横方向を0にして縮める */
  background-size: 0% 100%;

  /* マーカーが引かれる速度を指定 */
  transition:background-size 1.5s;
}

/* マーカーが引かれる際に付与するクラス */
.q.on {
  /* 横方向を100%にして、マーカーを引く */
  background-size: 100% 40%;
  background-position: bottom left;
  
}

.a{
	font-size:15px;
	line-height:30px;
	padding:0 20% 2% 20%;
	text-align: left;
	}
	


h2 {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  text-align:center;
  font-size:35px;
  margin:80px 0 20px 0;
  color:#223a70;
  position: relative;
  z-index: 50;
}

.another p{
text-align:center;
color:#223a70;
font-size:18px;
font-weight:bold;
word-break: keep-all;
position: relative;
	z-index: 50;
}

.another{
margin:50px 0 20px 0;
position: relative;
z-index: 50;
}


.test-img:hover img {
    transform: scale(1.1);
}

.return{
display:flex;
justify-content: center;
position: relative;
z-index: 50;
}

.return dd{
margin-left: 0;
}

.return img{
max-height: 400px;
border-radius:25px;
}

.return dl{
margin: 3%;
}


.1{
flex:1;
text-align:right;
}

.2{
flex:1;
text-align:left;
}





.button011 a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 17px auto;
    max-width: 150px;
    padding: 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #eee;
    overflow:hidden;
    text-decoration: none;
    border-radius: 100px;
    color:#223a70;
    position: relative;
	z-index: 50;
}


.button011 a:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 150%;
    height: 500%;
    content: "";
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
    transform: translateX(-98%) translateY(-25%) rotate(45deg);
    background: #3b3bff;
    opacity: 0.2;
}


.button011 a:hover:before {
    -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
    transform: translateX(-9%) translateY(-25%) rotate(45deg);
}

.arrowsymbol{
    position:relative;
    top:-30px;
    height:40px;
    width:94%;
	background: linear-gradient(135deg, #83A6CD 10%, #F697A4 100%);
    margin-left:1.5%;
    z-index: 10;
}
 
.arrowsymbol::before {
    position:absolute;
    content:"";
    border:solid 30px transparent;
    border-left:solid 30px  #F697A4;
    left:100%;
    top:-8px;
    z-index: 10;
}


.button {
	position: relative;
}


/* キラキラ部分 */
.star {
  position: absolute;
  display: block;
  width: 10px; /* キラキラの横幅を指定 */
  height: 10px; /* キラキラの縦幅を指定 */
	background-image: url("../pic2025/n25_glitter/n25_star-yellow.svg"); /* キラキラの画像のパスを記入 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  animation: button 1s;
  pointer-events: none;
}

/* キラキラが発生するアニメーション */
@keyframes button {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes button1 {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}







@media(width <= 1050px){
	
	.icon_pc{
		max-width: 210px;
		border-radius:18px;
		display: block;
	}
	
	.icon_mobile{
		display: none;
	}
	
	
	#career1{
		width:31%;
		height:400px;
	}

	#career2{
		width:31%;
		height:400px;
	}

	#career3{
		width:31%;
		height:400px;
	}
	
	.arrowsymbol{
	    width:92%;
	}

	
}



@media(width <= 760px){
	

	.interview{
		flex-direction:column;
		margin:0;
		gap:20px;
		margin:0 10px 0 15px;
	}
	



	
	h2{
		font-size: 25px;
	}
	
	.sp-only{
		display: none;
	}
	
	.icon_mobile{
		max-width: 300px;
		border-radius:10px;
		display: block;
	}
	
	.icon_pc{
		display: none;
	}
	
	.profile{
		margin:50px 8px 0 8px;
	}
	
	.profile img{
		width: 150px;
		border-radius:15px;
	}
	
	.joho{
		margin:35px 0 auto 10px;
		color:#223a70;
	}
	
	.joho p{
		font-size: 11px;
		margin:5px 0 5px 0;
	}

	
	.joho b{
		font-size: 23px;
		margin:8px 0 8px 0;
	}
	
	.schedule{
		display:block;
		margin:auto;
		box-shadow:0 0 10px 0 #ccc;
		width:95%;
		border-radius:20px;
		background-color:#ffffff;
		color:#223a70;
	}
		
	th{
		padding:20px 20px 20px 25px;
		text-align:center;
		font-size:25px;
	}

	td{
		padding:20px 20px 20px 15px;
		text-align:left;
		font-size:15px;
	}
	
	#careertitle{
		margin-top: 25px;
	}
	
	.careerstep{
		flex-direction:column;
		gap:0;
		color:#223a70;
	}
	.arrowsymbol{
		display: none;
	}
	
	#career1{
		box-shadow:0 0 10px 0 #ccc;
		width:98%;
		height:250px;
		border-radius:10px;
		background-color:#ffffff;
		z-index: 50;
	}
	
	#career2{
		box-shadow:0 0 10px 0 #ccc;
		width:98%;
		height:250px;
		border-radius:10px;
		background-color:#ffffff;
		z-index: 50;
	}

	#career3{
		box-shadow:0 0 10px 0 #ccc;
		width:98%;
		height:250px;
		border-radius:10px;
		background-color:#ffffff;
		z-index: 50;
	}
	
	.careerstep dl{
		margin:0 10px 0 3px;
	}
	
	.careerstep dt{
		padding:25px 20px 20px 20px;
		font-size:20px;
		text-align:center;
	}

	.careerstep dd{
		margin-left:0;
		padding:0 15px 20px 20px;
		font-size:17px;
		text-align:left;
		line-height:1.5;
	}
	
	#career1::after{
		content: '';
	    position: absolute;
	    top: 0;
	    right: 0;
	    width: 0;
	    height: 0;
	    border-left: 50px solid #ffffff;
	    border-top: 50px solid transparent;
	}
	.Q{
		margin: 30px 5px;
	}
	.q {
		font-size:16px;
	}
	
	.q.on {
	  /* 横方向を100%にして、マーカーを引く */
	  background-size: 100% 30%;
	  background-position: bottom left;
	  
	}
	
	.a{
		font-size:15px;
		line-height:30px;
		padding:0 0 10% 0;
	}
	
	.a{
		font-size:15px;
	}
		
	.return img{
		max-height: 200px;
		height:auto;
		border-radius:15px;
		margin:0;
	}

	#arrows{
	display:flex;
	justify-content:center;
	}


		.arrow{
	  position: relative;
	  display: inline-block;
	  width: 62px;
	  height: 33px;
	  padding:10px;
	}

	.arrow::before,
	.arrow::after {
	  content: "";
	  position: absolute;
	  left: calc(50% - 2px);
	  width: 4px;
	  height: 30px;
	  border-radius: 9999px;
	  background-color:#83A6CD;
	  transform-origin: 50% calc(100% - 2px);
	  transform: rotate(45deg);
	  top:0;
	}


	.arrow::after {
	  transform: rotate(-45deg);
	}


}

/*--------ハンバーガーメニュー--------*/
/*位置調整*/
.nav-fade__list{
	margin-top:10%;
}
.nav-fade__list1 .nav-fade__item{
	padding-left:0;
}
/* 横画面（ランドスケープモード）の場合 */
@media only screen and (orientation: landscape) {
	/*↓ハンバーガーメニュースクロールさせる↓*/
	.nav-fade__wrapper{
		height:100vh;
		overflow-x:hidden;
		overflow-y:scroll;
	}
	/*ハンバーガーメニューの言語選択を横に並べる*/
	.nav-fade__list1 .nav-fade__item{
		display: inline-block;
		padding-left:15px;
	}	
}